import React, { ReactNode } from 'react';
import styled from 'styled-components';

interface IProps {
  heads?: Array<string | ReactNode>;
  subHeads?: Array<string | ReactNode>;
  data: Array<Array<string | ReactNode>>;
}

interface Data {
  title?: string,
  value: any
}

interface Props {
  heads?: Array<string | ReactNode>;
  subHeads?: Array<string | ReactNode>;
  data: Array<Data>;
  colNum?: number;
  footer?: any;
  title?: any;
  subTitle?: any;
}

const CeilC = styled.table`
  td, th {
    border: 1px solid var(--ceil-border);
    padding: 5px 16px;
  }
  th {
    color: var(--ceil-header);
    font-size: 14px;
    font-weight: 500;
  };
  td {
    color: var(--ceil-content);
    font-size: 14px;
    font-weight: 500;
  }
  @media print {
    thead tr td {
      color: #000;
      font-family: 'STSong', 'SimSun';
      background: #fff !important;
    }
  }
  
`
const ColCeilC = styled.table`
  width: 100%;
  td, th {
    border: 1px solid var(--ceil-border);
    padding: 5px 16px;
    height: 55px;
  }
  th {
    color: var(--ceil-header);
    font-size: 14px;
    font-weight: 500;
  }
  tr {
    th {
      background: #FAFAFA;
      font-weight:500;
      color:rgba(68,68,68,1);
      font-size:16px;
    }
    td {
      font-size:14px;
      font-weight:500;
      color:rgba(102,102,102,1);
    }
  }
  td {
    color: var(--ceil-content);
    font-size: 14px;
    font-weight: 500;
  }
  @media print {
    border-color: #666666;
    thead tr td {
      color: #000;
      font-family: 'STSong', 'SimSun';
      background: #fff !important;
    }
  }
`

const Foot = styled.tr`
  td {
    font-weight:500;
    font-size:14px;
    color:rgba(102,102,102,1);
  }
`

const Header = styled.tr`
  td {
    font-weight:500;
    font-size:14px;
    color:rgba(102,102,102,1);
  }
  @media print {
    th {
      color: #000 !important;
      background: #fff !important;
      border-color: #666666;
      font-family: 'STSong', 'SimSun';
    }
  }
`

const SubTitle = styled.th`
  font-size: 14px !important;
  text-align: right;
`

export const Ceil = ({ heads, subHeads, data }: IProps) => (
  <CeilC>
    {
      Array.isArray(heads) && heads.length > 0 && <thead>
        <tr>
          {
            heads.map((it, index) => <th key={index}>{it}</th>)
          }
        </tr>
      </thead>
    }
    <tbody>
      {
        Array.isArray(data) && data.map((it, index) => (
          <tr key={index}>
            {
              Array.isArray(subHeads) && subHeads[index] && <th>{subHeads[index]}</th>
            }
            {
              Array.isArray(data) && data[index] && data[index].map((v, ind) => <td key={ind}>{v}</td>)
            }
          </tr>
        ))
      }
    </tbody>
  </CeilC>
);

export const ColTable = ({ title, subTitle, heads, colNum = 2, data = [], footer }: Props) => {

  const num = (Array.isArray(data) ? data : []).length;
  const ept = num - Math.floor(num / colNum) * colNum;
  const ans = [];

  [...Array(ept).keys()].forEach(v => {
    data.push({
      title: '',
      value: ''
    })
  })

  for (let i = 0; i < num; i += colNum) {
    let tp = 0;
    let tpAns = []
    while (colNum > tp) {
      tpAns.push(data[i + tp])
      tp++;
    }
    ans.push(tpAns)
  }

  return (
    <ColCeilC>
      {
        ((title) || (Array.isArray(heads) && heads.length > 0)) && <thead>
          {
            title && <Header>
              <th colSpan={subTitle ? colNum * 2 - 1 : colNum * 2} style={{ fontSize: '18px' }}>{title}</th>
              {
                subTitle && <SubTitle colSpan={1}>{subTitle}</SubTitle>
              }
            </Header>
          }
          <tr>
            {
              Array.isArray(heads) && heads.map((it, index) => <th key={index}>{it}</th>)
            }
          </tr>
        </thead>
      }
      <tbody>
        {
          Array.isArray(ans) && ans.map((it, index) => (
            <tr key={index}>
              {
                Array.isArray(it) && it.map((u, ind) => (
                  <React.Fragment key={ind}>
                    {u && u.title && <th key={`th${ind}`}>{u.title}</th>}
                    <td key={`td${ind}${u.value}`}>{u ? u.value : ''}</td>
                  </React.Fragment>
                ))
              }
            </tr>
          ))
        }
        {
          footer && <Foot>
            <td colSpan={colNum * 2}>{footer}</td>
          </Foot>
        }
      </tbody>
    </ColCeilC>
  )
}
